Skip to content

[#73831] Sprints column scroll bar overlaps content#23119

Merged
myabc merged 3 commits into
release/17.4from
bug/73831-sprints-column-scroll-overlap
May 11, 2026
Merged

[#73831] Sprints column scroll bar overlaps content#23119
myabc merged 3 commits into
release/17.4from
bug/73831-sprints-column-scroll-overlap

Conversation

@myabc
Copy link
Copy Markdown
Contributor

@myabc myabc commented May 7, 2026

Note

This PR is based on #23118. Please review/merge that PR first.

Ticket

https://community.openproject.org/wp/73831

What are you trying to accomplish?

Fix padding so that scrollbars do not overlap content.

Screenshots

Browser Before After
Firefox/Win Screenshot 2026-05-07 at 23 18 34 Screenshot 2026-05-07 at 23 20 29
Chrome/Win Screenshot 2026-05-07 at 23 18 09 Screenshot 2026-05-07 at 23 19 35

What approach did you choose and why?

Important

This PR also cherry-picks 9071b9b from #22936 (now merged into dev)

Targets #content-body padding directly instead of using the broad extended-content--right mixin, which was also zeroing #content-header padding (causing the header spacing regression flagged in review). A follow-up commit extracts the #content:has(#content-bodyRight > *) selector into a split-pane-active Sass mixin to centralize it.

Merge checklist

  • Added/updated tests
  • Added/updated documentation in Lookbook (patterns, previews, etc)
  • Tested major browsers (Chrome, Firefox, Edge, ...)

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adjusts Backlogs “Sprint planning” layout styling to prevent the sprints column scrollbar from overlapping content by tweaking page padding and simplifying/retargeting sprint planning container styles.

Changes:

  • Extends Backlogs backlog show page content to the right side (extended-content--right) to remove right padding constraints.
  • Refactors sprint header and sprint planning layout styles to focus on .op-sprint-* selectors.
  • Updates the side-by-side divider styling for sprint planning columns in container queries.

Comment thread frontend/src/assets/sass/backlogs/_master_backlog.sass Outdated
@myabc myabc force-pushed the bug/73831-sprints-column-scroll-overlap branch from efa3345 to 85adc61 Compare May 7, 2026 17:11
Comment thread frontend/src/assets/sass/backlogs/_master_backlog.sass Outdated
@myabc myabc requested a review from HDinger May 7, 2026 17:17
@myabc myabc force-pushed the bug/73831-sprints-column-scroll-overlap branch from 85adc61 to b203f07 Compare May 7, 2026 21:02

.controller-backlogs\/backlog.action-show
.controller-backlogs\/backlog.action-show,
.controller-backlogs\/backlog.action-details
Copy link
Copy Markdown
Contributor Author

@myabc myabc May 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI, we need to apply this to both action-details and action-show. Turbo-loaded pages do not set the correct page class.

(I do not understand why this wasn't a problem for #23118 however)

@myabc myabc marked this pull request as ready for review May 7, 2026 21:25
@myabc myabc added this to the 17.4.x milestone May 7, 2026
Copy link
Copy Markdown
Contributor

@HDinger HDinger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not really happy with this. This solution is indeed hacky and not very future proof. Further, there are also still some issues. Since you are extending the content to the right, the header line is missing the spacing to the edge:

Image

In order to fix this, you'd need to extend the hack even more which leads me again to the question of whether we really need the scrollbars.. Technically, it would be much easier and future proof to just hide them. I'd also argue that you don't necessarily need them from a UX point of view but this is not my call.
So please clarify that. If the decision is to show the scrollbar, the spacing for the header needs to be added again. Otherwise this will bite us as soon as we add a button to the PageHeader.

Comment thread frontend/src/assets/sass/backlogs/_master_backlog.sass Outdated
Base automatically changed from bug/74753-backlog-sprints-columns-full-height to release/17.4 May 8, 2026 08:21
@myabc myabc force-pushed the bug/73831-sprints-column-scroll-overlap branch from b203f07 to a7e2efc Compare May 8, 2026 17:26
@myabc myabc requested review from HDinger and Copilot May 8, 2026 17:27
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

@myabc
Copy link
Copy Markdown
Contributor Author

myabc commented May 8, 2026

@HDinger @bsatarnejad I've simplified the margin-right: overrides. Additionally, there is now a split-pane-active mixin, which makes this code slightly less horrible.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

myabc added 3 commits May 11, 2026 14:20
Removes `_master_backlog.sass` rules tied to UI primitives that were
deleted in #22740 but were not cleaned up alongside them:
`.op-backlogs-header` and its modifiers, `.op-backlogs-container`,
`.op-backlogs-lists`, and the `backlogsListsContainer` container queries
that targeted the old header layout.
Centralizes the `#content:has(#content-bodyRight > *)` selector
into a `split-pane-active` mixin so it is defined in one place.
Purely mechanical — no behavioral change.
@myabc myabc force-pushed the bug/73831-sprints-column-scroll-overlap branch from 344b931 to 9cd4b59 Compare May 11, 2026 12:20
Copy link
Copy Markdown
Contributor

@bsatarnejad bsatarnejad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@myabc myabc merged commit 8f24ad3 into release/17.4 May 11, 2026
13 of 14 checks passed
@myabc myabc deleted the bug/73831-sprints-column-scroll-overlap branch May 11, 2026 14:21
@github-actions github-actions Bot locked and limited conversation to collaborators May 11, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Development

Successfully merging this pull request may close these issues.

4 participants